<template>
    <div class='funeral_item_select' >
       <div class='funeral_item_select' >
            
            <div class='mains' >
                
                <ul class='item_ul' v-if="shows" >
                    <li v-for="(item,index) in tableData" :key="index" class='item_li'>
                         <div class='item_icon'>
                            <el-image
                            style="width: 80px; height: 80px"
                            :src="item.sf_ex50.split(',')[0]"
                            ></el-image>
                        </div>
                        <div class='item_content'>
                            <div class='title'>{{item.szi_ex1}}</div>
                            <div class='remark'>
                                
                                <div>{{item.szi_ex6}}</div>
                            </div>  
                            <div class='price'>
                                ￥
                               <span v-if="item.szi_ex2!='0'&&item.szi_ex2!='0.0'">{{item.szi_ex2}}</span>
                                <span v-if="item.szi_ex3!=''" class='dw'>
                                    /{{item.szi_ex3}}
                                </span>
                            </div> 
                        </div>
                        <div class="item_btn">
                             <el-radio v-model="sf_id" :label="item.szi_ex8">选择</el-radio>
                        </div>
                    </li>
                </ul>
            </div>
              <div class='footer '>
                <div class='amt_total'>
                    <div class='amt_total_item'>
                         <el-date-picker
                            v-model="of_dat1"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>

                        <el-select v-model="of_ex1" placeholder="请选择类型" style='margin-left:10px'>
                            <el-option
                                label="中餐"
                                value="中餐">
                            </el-option>
                             <el-option
                           
                                label="晚餐"
                                value="晚餐">
                            </el-option>
                        </el-select>
                        <el-input v-model="of_ex5" placeholder="桌数" style='width:80px;margin-left:5px'></el-input>
                         <el-button type="primary" style='margin-left:10px' @click="addItem">确定下单</el-button>
                        <div style='margin-top:10px;width:100%'>
                        <el-input v-model="of_ex3" placeholder="请输入备注" style='width:100%'></el-input>
                        </div>
                    </div>

                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
import myInput  from '../input/myInput.vue'
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
    name:'order_food_select_show',
    props:['type','styles','appid','data','dataField'],
    components: {
        myInput
    },
    data(){
        return{
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableData:[],
            styles2:this.styles,
            of_dat1:"",
            of_ex1:"",
            of_ex3:"",
            of_ex5:"",
            pId:'',
            names:'',
            shows:false,
            sf_id:""
        }
    },
    mounted() {
        
    },
    created(){
      
        this.of_dat1=this.getNowFormatDate();
        let sef=this;
        this.$post("bygex","byg/funeral/getFuneralSfItem",{type:this.type}).then(data=>{
            sef.tableData=[];
            
            
            for(let i=0;i<data.item.length;i++){
                if(!data.item[i].sf_ex50)
                    data.item[i].sf_ex50=localStorage.getItem("imgIp")+"/rootImg/sl/zw.png"
                
               
                sef.tableData.push(data.item[i])
                
            }
            
            this.shows=true;
            console.log(this.selectItem)
            
           
            
            window.setTimeout(function(){
                 let els=document.getElementsByClassName("item_li");
                 for(let i=0;i<els.length;i++){
                      new Viewer(els[i], {
                        // 配置
                    })
                 }
                
                
            },1000)
           
        })
        if(!this.styles){
            this.styles2="height:40VH;";
        }
        console.log("styles2===="+this.styles2+"=="+this.styles)
      
        
    },
    methods:{
        
        addItem(){
            if(!this.sf_id){
                this.$message.error('请选择套餐');
                return;
            }
            if(!this.of_dat1){
                this.$message.error('请选择日期');
                return;
            }
             if(!this.of_ex1){
                this.$message.error('请选择类型');
                return;
            }
             if(!this.of_ex5){
                this.$message.error('请输入桌数');
                return;
            }
            let row=null;
            for(let i=0;i<this.tableData.length;i++){
                let szi_ex8=this.tableData[i].szi_ex8;
                if(szi_ex8==this.sf_id){
                    row=this.tableData[i];
                }
            }
            let item={};
            let data={};
            data.of_ex1=this.of_ex1;
            data.of_ex3=this.of_ex3;
            data.of_dat1=this.of_dat1;
            data.of_ex2=this.sf_id;
            data.of_ex4=row.szi_ex1;
            data.of_ex5=this.of_ex5;
            let szi_ex2=Number(row.szi_ex2);
            row.szi_ex4=this.of_ex5;
            let szi_ex5=Number(this.of_ex5)*szi_ex2;
            row.szi_ex5=szi_ex5;
            item.data=data;
            item.row=row;
            this.$emit("addItem",JSON.stringify(item))
        }
    },
    getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

}
</script>
<style scoped>
.funeral_item_select{
    width:100%;
    overflow:hidden;
    height:100VH;
    padding:10px;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    padding-top:0;
}
.mains{
    width:100%;
    height:100%;
    
    box-sizing: border-box;
    flex:1;
    overflow-y:hidden;
    display:flex;
    flex-direction: row;
    padding:10px;
}
.leftMenu{
    width:120px;
    border-right:1px solid #ddd;
}
.item_ul{
    width:100%;
    height:100%;
    
    box-sizing: border-box;
    flex:1;
    overflow-y:auto;
}
.item_li{
    width:100%;
    text-decoration: none;
    list-style: none;
    display:flex;
    flex-direction: row;
    box-sizing: border-box;
    padding:10px;
}
.item_icon{
    width:60px;
}
.item_content{
    flex:1;
    box-sizing: border-box;
    padding-left:20px;
}
.remark_label{
    width:60px;
    color:darkgray;
    display:inline-block;
}
.item_content .title{
    font-size:14px;
    color:#000;
    font-weight:bold;
    height:25px;
}
.item_content .remark{
    font-size:12px;
    color:rgba(99, 96, 96, 0.933);
}
.item_icon img{
    width:60px;

}
.price{
    font-size:14px;
    font-weight:bold;
    height:30px;
    line-height:30px;
    color:red;
}
.dw{
    
    color:rgba(99, 96, 96, 0.933);
}
.item_btn{
    width:120px;
    text-align:center;
    margin-top:20px;
}
.footer{
    height:120px;
}
.amt_total_item{
    height:100px;
    box-sizing: border-box;
    padding:10px;
}
.amt_total{
    border:1px solid #ddd;
    line-height:20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background:#ddd;
    -moz-box-shadow: 2px 2px 10px #909090;
   -webkit-box-shadow: 2px 2px 10px #909090;
   box-shadow:2px 2px 10px #909090;

}
</style>